// components/Resume/ResumeControlBarBackground.tsx
import { useAppDispatch, useAppSelector } from "lib/redux/hooks";
import {
    selectBackgroundConfig,
    changeBackgroundConfig,
    type Settings,
} from "lib/redux/settingsSlice";

export const ResumeControlBarBackground = () => {
    const dispatch = useAppDispatch();
    const background = useAppSelector(selectBackgroundConfig);

    const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const type = e.target.value as Settings['background']['type'];
        const payload: Partial<Settings['background']> = { type };

        // 根据类型设置默认值
        if (type === 'pattern') {
            payload.url = '/backgrounds/pattern-1.svg';
        } else if (type === 'image') {
            payload.url = background.url || '';
        } else {
            payload.url = undefined;
        }

        dispatch(changeBackgroundConfig(payload));
    };

    const handleOpacityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        dispatch(changeBackgroundConfig({
            opacity: parseFloat(e.target.value)
        }));
    };

    const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            // 直接生成Blob URL
            const objectUrl = URL.createObjectURL(file);
            console.log("objectUrl", objectUrl);

            // 更新到Redux状态
            dispatch(changeBackgroundConfig({
                url: objectUrl // 格式如：blob:http://localhost:3000/550e8400...
            }));

            // 可选：在组件卸载时自动清理
            return () => URL.revokeObjectURL(objectUrl);
        }
    };

    return (
        <div className="flex items-center gap-4">
            {/*<label className="flex items-center gap-2">
                <span>背景类型:</span>
                <select
                    value={background.type}
                    onChange={handleTypeChange}
                    className="rounded border p-1"
                >
                    <option value="none">无背景</option>
                    <option value="image">图片背景</option>
                    <option value="pattern">图案背景</option>
                </select>
            </label>

            {background.type !== 'none' && (
                <>
                    <label className="flex items-center gap-2">
                        <span>透明度:</span>
                        <input
                            type="range"
                            min="0"
                            max="1"
                            step="0.1"
                            value={background.opacity}
                            onChange={handleOpacityChange}
                            className="w-24"
                        />
                    </label>

                    {background.type === 'image' && (
                        <input
                            type="file"
                            accept="image/*"
                            onChange={handleFileUpload}
                        />
                    )}
                </>
            )}*/}
        </div>
    );
};